<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="App">
        <input type="text" v-model="nickname">
        {{nickname.toUpperCase()}}
        <ul>
            <li v-for="(item, i) in arr">
                <!-- {{i}} -->
                <a v-bind:href="'detail.html?id='+item">{{item.title}}</a>
                <button v-on:click="del(i)">删除</button>
            </li>
        </ul>

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: "#App",
            // template:"<h1>123</h1>",
            data() {
                return {
                    arr: [],
                    nickname: "Simba"
                }
            },
            beforeCreate() {
                console.log("我先走了", this.$data)
            },
            created() {
                //data准备好了
                this.getArr()
                console.log("我第二", this.$data)
            },
            beforeMount() {
                console.log("beforeMount", this.$data)
            },
            mounted() {
                //dom 准备好了
                console.log("mounted", this.$data)
            },
            beforeUpdate() {
                console.log("beforeUpdate", this.$data)
            },
            updated() {
                console.log("updated", this.$data)
            },
            methods: {
                del(i) {
                    this.arr.splice(i, 1)
                },
                getArr() {
                    axios.get("https://www.easy-mock.com/mock/5d08ce6996113e29d13d9afe/xcx/right").then(res => {
                        console.log(res.data.goodsList)
                        this.arr = res.data.goodsList
                    })
                }
            }
        })
        // vm.$mount("#App")
    </script>
</body>

</html>